<template>
<div>
<!--使用Vuex进行计算，Vuex计算有很多方便的地方，
 Vuex如何使用：下载、注册、Vuex内部封装了三个部分
 actions、mutations、state
 actions:通常是对应的业务逻辑的处理
 mutations:单纯数据处理
 state:存储数据
-->
    <h1>当前的和是{{ $store.state.sum }}</h1>
    <h2>放大10倍:{{ $store.state.sum*10 }}</h2>
    <select  v-model.number="n">
        <!--注意value='1'这时候传递的是字符串-->
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
        <button @click='increase(n)'>+</button>
        <button @click='decrease(n)'>-</button>
        <button @click='increaseOdd(n)'>只有是奇数才能添加</button>
        <button @click='increaseDelay(n)'>延迟添加</button>
        <hr>
 <!--mapActions，mapMutations,mapState-->
    <h1>当前的和是{{ sum }}</h1>
    <h2>放大10倍:{{ sum*10 }}</h2>
    <select  v-model.number="n">
        <!--注意value='1'这时候传递的是字符串-->
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select> 
    <button @click='increase(n)'>+</button>
        <button @click='decrease(n)'>-</button>
        <button @click='increaseOdd(n)'>只有是奇数才能添加</button>
        <button @click='increaseDelay(n)'>延迟添加</button>
    <ul>
        <li >{{ skill }}</li>
    </ul>
</div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'

export default{
    data(){
      return {
        n:1,
      }
    },
    computed:{
      //使用计算属性渲染一个技能列表
    ...mapState(['sum','skill']) //获取对应的数组,并且生成的skills就是属性名
    },
    /*
     对于actions和mutations属性而言，内部封装的均为函数
     也就是说，mapActions、mapMutations生成的就是函数
     既然是方法，就需要生命在methods中
     也是对应多种写法
    */
    methods:{
       /* increase(){
          this.$store.commit("add",this.n)
       },
       decrease(){
         this.$store.commit("sub",this.n)
       }, 
       increaseOdd(){
        //这里只是派发任务，并没有实际执行
        this.$store.dispatch('addWhenOdd',this.n)
       },
       increaseDelay(){
        //这里没有实际执行
        this.$store.dispatch('addDelay',this.n)
       }, */

       //使用...mapActions进行函数生成方式一：对象模式：具体参数就需要在监听事件的地方传递了
       ...mapActions({increaseOdd:'addWhenOdd',increaseDelay:'addDelay'}),
       //使用...mapMutations进行函数生成方式一，对象模式：具体参数就需要在监听事件的地方传递了
       ...mapMutations({increase:'add',decrease:'sub'}),
    }
}
</script>
